<script setup>
import { ref } from 'vue'

const regardList = ref([
  '用户协议',
  '儿童隐私政策',
  '个人信息保护指引',
  '权限列表',
  // '用户注销协议',
  '与第三方共享个人信息清单',
  // '更新日志',
])

const urlObj = ref({
  0: 'yhxy',
  1: 'et',
  2: 'gr',
  3: 'qx',
  // 4: 'zx',
  4: 'dsf',
  // 6: 'yhxy',
})
const changeRouter = (index) => {
  window.location.href = `https://lddian.com/xe/${urlObj.value[index]}.html`
}

const formSection = ref(null)
const scrollToForm = () => {
  const element = formSection.value
  if (element) {
    const offset = 100 // 向上偏移80px
    const elementPosition =
      element.getBoundingClientRect().top + window.pageYOffset
    window.scrollTo({
      top: elementPosition - offset,
      behavior: 'smooth',
    })
  }
}

const userList = ref([
  {
    num: '150,000,000',
    text: '活跃用户',
  },
  {
    num: '3200,000',
    text: '每日视频',
  },
  {
    num: '25,000,000',
    text: '每日点赞',
  },
  {
    num: '2300,000',
    text: '创作者',
  },
])

const codeImg = ref('ios')
const changeTab = (type) => {
  codeImg.value = type
}

const userimglist = ref([
  'https://fastly.picsum.photos/id/1001/40/40.jpg?hmac=pqwha2JmsUPJMuVbs3CGoNUUl_DSQhMmbqWKiWokbco',
  'https://picsum.photos/id/1002/40/40',
  'https://picsum.photos/id/1003/40/40',
  'https://picsum.photos/id/1004/40/40'
])
</script>

<template>
  <div class="container">
    <div class="top_header">
      <div class="my_header">
        <div class="app_name">
          <img style="width: 50px; height: 50px" src="@/static/tb.png" alt="" />
          <span>灵动点</span>
        </div>
        <div class="home" @click="scrollToForm">立即下载</div>
      </div>
    </div>

    <div class="cntainer">
      <div class="main">
        <div class="left">
          <h1>发现<span>生活</span>的精彩瞬间</h1>
          <div class="desc">
            灵动点，让每一刻都值得记录。用短视频分享你的生活发现世界的精彩，与千万用户一起创造无限可能。
          </div>
          <div class="btn_list">
            <div class="ios_btn" @click="scrollToForm">
              <img src="@/static/ios.png" alt="" />
              <div>
                <div>下载</div>
                <div style="font-weight: 600">苹果ios</div>
              </div>
            </div>
            <div class="android_btn" @click="scrollToForm">
              <img src="@/static/android.png" alt="" />
              <div>
                <div>下载</div>
                <div style="font-weight: 600">安卓 系统</div>
              </div>
            </div>
          </div>
          <div class="user_list">
            <div class="img_list">
              <img src="@/static/10001.jpg" alt="图片" />
              <img src="@/static/10002.jpg" alt="图片" />
              <img src="@/static/10003.jpg" alt="图片" />
              <img src="@/static/10004.jpg" alt="图片" />
            </div>
            <div class="user_num">500+</div>
          </div>
        </div>

        <div class="right">
          <div style="height: 420px; width: 100%; position: relative">
            <img src="@/static/app1.png" alt="" />
            <img class="app2" src="@/static/app2.png" alt="" />
            <img class="app3" src="@/static/app3.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="app_user_num">
      <div class="app_user_num_list">
        <div class="app_user_num_item" v-for="(item, index) in userList" :key="index">
          <div class="number">{{ item.num }}</div>
          <div>{{ item.text }}</div>
        </div>
      </div>
    </div>
    <div class="form" ref="formSection">
      <div class="form_content">
        <div class="login_form">
          <h1 style="font-size: 36px">立即下载灵动点</h1>
          <div style="line-height: 30px">
            加入千万用户的行列，开始记录和分享你的精彩生活，发现世界的美好瞬间
          </div>
          <div class="xz_btn" @click="changeTab('ios')">
            <img src="@/static/ios.png" alt="" />
            <div>
              <div style="font-size: 12px; margin-bottom: 4px">下载</div>
              <div style="font-weight: 600">苹果ios</div>
            </div>
          </div>
          <div class="xz_btn android_xz_btn" @click="changeTab('android')">
            <img src="@/static/android.png" alt="" />
            <div>
              <div style="font-size: 12px; margin-bottom: 4px">下载</div>
              <div style="font-weight: 600">安卓 系统</div>
            </div>
          </div>
          <div class="sm_list">
            <span>安全无毒</span>
            <span style="margin: 0 20px">安全无毒</span>
            <span>安全无毒</span>
          </div>
        </div>
        <div class="code_png">
          <div style="font-size: 20px; font-weight: 700">或扫描二维码下载</div>
          <img src="@/static/ios_code.png" alt="" v-if="codeImg == 'ios'" />
          <img src="@/static/android_code.png" alt="" v-else />
          <div>扫描上方二维码，根据提示下载安装灵动点APP</div>
        </div>
      </div>
    </div>
    <div class="lines"></div>
    <div class="footer">
      <div class="footer_item">
        <div class="title">软件下载</div>
        <div class="version_list">
          <div class="item special">灵动点 android</div>
          <div class="item special">灵动点 ios 开发中</div>
          <div class="item special">
            灵动点
            <div>HarmonyOS 开发中</div>
          </div>
        </div>
      </div>
      <div class="footer_item">
        <div class="title">关于我们</div>
        <ul>
          <li class="special" v-for="(item, index) in regardList" :key="index" @click="changeRouter(index)">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="footer_item">
        <div class="title">商务合作</div>
        <div style="line-height: 28px; cursor: pointer">
          提供产品渠道、校园推广、异业/品牌活动等多 种合作形式，诚邀各界伙伴。
        </div>
        <div style="cursor: pointer">合作邮箱:lddiankk@163.com</div>
        <div class="title" style="margin-top: 20px">关注我们</div>
        <img style="width: 80px; margin-bottom: 10px" src="@/static/gzh.png" alt="" />
      </div>
    </div>
    <div class="lines"></div>
    <div class="yd_footer">
      <div class="header">
        <div>Copyright © 2025-2026</div>
        <div style="margin: 0 40px">
          太原清风云动科技有限公司 版权所有 保留一切权利
        </div>
        <div>lddian.com</div>
      </div>
      <a href="http://beian.miit.gov.cn/" style="margin-top: 20px">晋ICP备2024037761号-6</a>
      <div style="display: flex; align-items: center">
        <img style="width: 20px; height: 20px; margin-right: 6px" src="@/static/gnlogo.png" alt="" />
        <a style="margin-top: 6px" href="http://beian.miit.gov.cn/">晋公网安备14012102000169号</a>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app_user_num {
  height: 256px;
  background: #feeff5;

  .app_user_num_list {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .app_user_num_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #000;

    .number {
      font-size: 40px;
      margin-bottom: 20px;
      /* 文字渐变核心代码 */
      background: linear-gradient(to right, #7864f7, #d2638d);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 700;
    }
  }
}

.container {
  background: #242336;
  min-height: 100vh;
  color: #fff;
  width: 100vw;
  padding-top: 100px;
  padding-bottom: 20px;
}

.form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #f9f8ff;
  padding: 80px 0;

  .form_content {
    display: flex;
    width: 800px;
    height: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
  }

  .login_form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    background: linear-gradient(to right, #7763f7, #e969a9);
    padding: 40px;

    .xz_btn {
      display: flex;
      align-items: center;
      height: 60px;
      background: #ffffff;
      border-radius: 30px;
      padding: 0 20px;
      color: #6c63ff;
      cursor: pointer;

      img {
        margin-right: 20px;
      }
    }

    .android_xz_btn {
      background: #000;
      color: #fff;
    }
  }

  .code_png {
    padding: 40px;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #000;
    font-weight: 500;

    img {
      width: 200px;
      height: 200px;
      border: 10px solid #f5f5f5;
      border-radius: 10px;
    }
  }
}

.special:hover {
  color: #3298cb !important;
  cursor: pointer;
}

.top_header {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  display: flex;
  justify-content: center;
  background: #242336;
}

.my_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  width: 1200px;
  box-sizing: border-box;

  .home {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6c63ff;
    color: #fff;
    width: 112px;
    height: 40px;
    border-radius: 20px;
  }

  .app_name {
    display: flex;
    align-items: center;
    font-size: 28px;
    /* 文字渐变核心代码 */
    background: linear-gradient(to right, #65a8d3, #d2638d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
  }

  span {
    margin-left: 20px;
  }
}

.cntainer {
  margin: 0 auto;
  width: 1200px;

  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 560px;

    .left {
      flex: 3.5;
      padding-right: 50px;
      padding-bottom: 100px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;

      h1 {
        font-size: 48px;

        span {
          /* 文字渐变核心代码 */
          background: linear-gradient(to right, #65a8d3, #d2638d);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }

      .desc {
        font-size: 16px;
        line-height: 30px;
        margin: 20px 0;
      }

      .btn_list {
        display: flex;
        font-size: 14px;

        .ios_btn,
        .android_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 136px;
          height: 60px;
          background: #fff;
          border-radius: 36px;
          margin-right: 20px;
          color: #000;
        }

        .android_btn {
          background: #000;
          color: #fff;
        }
      }

      .user_list {
        display: flex;
        margin-top: 20px;

        .user_num,
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        img:nth-child(n + 1) {
          margin-left: -10px;
        }

        .user_num {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          background: #6c63ff;
          margin-left: -10px;
        }
      }
    }

    .right {
      flex: 5;
      height: 100%;
      display: flex;
      align-items: center;

      img {
        position: absolute;
        left: 0;
        width: 300px;
        height: 420px;
      }

      .app2 {
        left: 210px;
      }

      .app3 {
        left: 420px;
      }
    }
  }

  .nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;

    img {
      width: 220px;
    }
  }
}

.lines {
  height: 2px;
  width: 100vw;
  background: #333333;
}

.footer {
  width: 1200px;
  margin: 0 auto;
  display: flex;

  .footer_item {
    flex: 1;
    font-size: 14px;
    color: #999;

    ul,
    li {
      padding: 0;
      list-style: none;
      margin-bottom: 12px;
    }

    .title {
      font-size: 22px;
      color: #fff;
      margin: 10px 0 20px;
      font-weight: 600;
    }

    .version_list {
      display: flex;
      flex-direction: column;
      display: inline-block;

      .item {
        border: 1px solid #333;
        padding: 14px 40px;
        border-radius: 14px;
        margin-bottom: 20px;
      }
    }
  }
}

.yd_footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #656565;
  margin-top: 50px;

  .header {
    display: flex;
    align-items: center;
  }

  a {
    color: #656565;
    margin-bottom: 6px;
  }
}
</style>
